<template>
  <div class="vip">
    <div class="header_top wrapper">
      <!-- 头部 star  -->
      <div class="header">
        会员专区
      </div>
      <!-- 头部 end   -->
      <!-- 头部图片 star  -->
      <div class="bigimg">
        <img :src="require('../assets/img/iv_huiyuan_banner.png')" alt="" />
      </div>
      <!-- 头部图片 end   -->

      <!-- 未开通vip star  -->
      <div class="notvip" v-if="!vips">
        <p>您还未开通VIP,无法收听以下内容。</p>
        <router-link tag="p" to="/member?hop=/vip">去开通 ></router-link>
      </div>
      <!-- 未开通vip end   -->

      <!-- 优选 star  -->
      <div class="prefer">
        <ul>
          <li v-for="item in vipLists" :key="item.id" @click="listId(1005,item.id)">
            <div class="img">
              <img :src="item.img" alt="" />
              <div class="vip"></div>
            </div>
            <p>{{item.name}}</p>
          </li>
          
        </ul>
      </div>
      <!-- 优选 end   -->
    </div>
  </div>
</template>

<script>
// import {getJsonData} from "../api/home.js"
import { getJsonhomeType } from "../api/homeType.js";
export default {
  data() {
    return {
      vipLists:null,
      vips:false || window.localStorage.getItem("vip"),
    };
  },
  methods:{
     change(){
      this.$emit('change');
    },
    listId(id,listenId){
      this.$emit("list-id",[id,listenId])
    },
  },
  created(){
    getJsonhomeType().then(data=>{
      this.vipLists = data.homeTypeLists.filter(item=>item.id==1005);
      this.vipLists=this.vipLists[0].listen
      console.log(this.vipLists);
    })
  }
};
</script>

<style lang="scss" scoped>
.vip {
  background-color: #f4f4f4;
  .wrapper {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    padding-bottom: 15px;
  }
  .header_top {
    width: 100%;
    background: url(../assets/img/iv__top_title_bg.png) no-repeat;
    background-size: 100% 150px;
  }
  .header {
    height: 30px;
    padding: 10px 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 18px;
  }
  .bigimg {
    padding: 0px 10px 12px 10px;
    display: flex;
    img {
      width: 100%;
      height: 144px;
    }
  }
  .notvip {
    margin: 0 12px 10px;
    background-color: #9e6efe;
    height: 36px;
    line-height: 36px;
    border-radius: 18px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    p {
      &:nth-child(1) {
        color: #fff;
        padding-left: 42px;
        background: url(../assets/img/iv_genji_man.png) 10px no-repeat;
        background-size: 18px;
      }
      &:nth-child(2) {
        color: #feea00;
        padding-right: 18px;
      }
    }
  }
  .prefer {
    padding: 0 12px 90px;
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 14px;
        width: calc(100% / 3);
        padding: 0 0px 7px;
        .img {
          padding: 0 7px;
          position: relative;
        }
        p {
          padding: 6px 14px 0;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
    }
    .img {
      img {
        width: 100%;
        border-radius: 8px;
      }
    }
    .vip {
      background: url(../assets/img/ic_shouye_vip.png) no-repeat;
      width: 38px;
      height: 15px;
      background-size: 100%;
      position: absolute;
      top: 0;
      left: 7px;
    }
  }
}
</style>